<!--
 * Date: 2018年01月02日 09:32:33
 * LastEditors: lvyou
 * LastEditTime: 2019年12月02日 15:58:19
 * FilePath: \youlinweb-master\src\pages\mine\myTopicDiscuss.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
	<div>
		<div class="loadmore-container" ref="myTopicDicussWrapper">
    	<div class="loadmore-ul">
			<div class="shuoshuo-new" v-if="istopicdiscuss==true">
         <span class="yl-2kong nosvg">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
         </span>
	          <span class="no-text">啊哦，这里空空的，让人感觉怪怪的，赶紧来填上一笔吧！</span>
	        </div>
			<div class="hot-discuss" v-if="list != ''">
		      <div style="background-color: white;margin-bottom:0.2rem" v-for="(item,i) in list" :key="i">
            <hotheadertopic  :commentindex="i" :nickname="item.nickName" :avatarimg="item.headImg" :topictime="item.time" @topiccommentdetail="totopiccomdet" :type="0" :userType="item.userType" :isTalent="item.isTalent" :pendantType="item.pendantType" :pendantPicUrl="item.pendantPicUrl"></hotheadertopic>
            <commentbody @showImg="popupImg" v-if="item.picUrls != null" :commentindex="i" @replycomment="totopiccomdet" :commenttype="null" :commenttext="item.content"
		                     :piclength="item.picUrls.length" :picarray="item.picUrls" :lanxicontent="item.lanxicontent"></commentbody>
            <commentbody @showImg="popupImg" v-if="item.picUrls == null" :commentindex="i" @replycomment="totopiccomdet" :commenttype="null" :commenttext="item.content"
		                     :piclength="0" :picarray="item.picUrls" :lanxicontent="item.lanxicontent"></commentbody>
            <thubmUp :topiccommentnum="item.commentCount" :thumbupnum="item.likesNumber" :isup="item.isGood" :commentindex="i"
		                  @thumbup="isthumbup" @commentsvgg="totopiccomdet"></thubmUp>          
		      </div>
		    </div>
		</div>
		</div>
	</div>
</template>
<script>
import { Indicator } from "mint-ui";
import hotheadertopic from "src/components/allhot-header-indextopic.vue";
import commentbody from "src/components/comment-detail-body.vue";
import thubmUp from "src/components/thumb-up.vue";
import api from "src/api/index";
export default {
  data() {
    return {
      list: [],
      istopicdiscuss: false,
      totalPage:'',
			page:1,
			is_r:false,
    };
  },
  components: {
    hotheadertopic,
    commentbody,
    thubmUp
  },
  methods: {
    popupImg(data,index){
      this.$emit('showImg',data,index)
    },
    isthumbup(data) {
      this.topicId = this.list[data.commentindex].topicId;
      const param = {
        type: 0,
        typeId: this.list[data.commentindex].id,
        recMsgId: this.list[data.commentindex].userId,
        topicId: this.topicId
      };
      if (this.list[data.commentindex].isGood == 0) {
        api.Querytopicsavegood(param).then(res => {
          if (res.success) {
            if (res.isGood == 1) {
              this.list[data.commentindex].isGood = !this.list[
                data.commentindex
              ].isGood;
              this.list[data.commentindex].likesNumber += 1;
            }
          }
        });
      } else if (this.list[data.commentindex].isGood == 1) {
        api.QuerytopicCanaleGood(param).then(res => {
          if (res.success) {
            if (res.isGood == 0) {
              this.list[data.commentindex].isGood = !this.list[
                data.commentindex
              ].isGood;
              this.list[data.commentindex].likesNumber -= 1;
            }
          }
        });
      }
    },

    totopiccomdet(data) {
      localStorage.turnCount = "myTopicDiscuss2detail";
		  this.$util.getTransformState("turnBackmyTopicDiscuss");
      this.$router.push({
        path: "/commentsdetail",
        query: {
          type: this.topicType,
          commentId: this.list[data.commentindex].id,
          myJoin: 1,
          topicId:this.list[data.commentindex].topicId
        }
      });
    },
    initMyInteraction() {
      let p = new Promise((resolve, reject) => {
      if ("myTopicDiscuss2detail" == localStorage.turnCount) {
				let myTopicDiscussObj = JSON.parse(localStorage.myTopicDiscussStorage);
				this.list = myTopicDiscussObj.list;
				this.page = myTopicDiscussObj.page;
				this.totalPage = myTopicDiscussObj.totalPage;
				if(this.page<this.totalPage){
					this.is_r=false;
				}
				resolve(true);
			}else{
        const data = {type:2,page:this.page,limit:10};
        api.QueryMyInteraction(data).then(res => {
          if (res.success) {
            this.list = this.is_r
							? [...this.list, ...res.data.list]
							: res.data.list;
            this.totalPage = res.data.totalPage;
            if(this.page<res.data.totalPage){
							this.is_r=false;
            };
            if (this.list.length==0) {
              this.istopicdiscuss = true;
            } else {
              this.istopicdiscuss = false;
            };
            if(this.myscroll){
							this.$nextTick(() => {
								this.myscroll.refresh();
							});
						}; 
            this.picAutoOrient(this.page-1,this.list);
            this.$util.getlanxidata(this.list);
            let myTopicDiscussObj = JSON.stringify({
							list:this.list,
							page: this.page,
							totalPage: this.totalPage,
						});
						localStorage.myTopicDiscussStorage = myTopicDiscussObj;
          }
          resolve("我参与的话题讨论...");
        });
      }
      });
      return p;
    },
    picAutoOrient(data,list) {
      for (var m = 10 * data; m < list.length; m++) {
        if(list[m].picUrls!=null){
          for (var n = 0; n < list[m].picUrls.length; n++) {
            list[m].picUrls[n].src =
              list[m].picUrls[n].src + "?imageMogr2/auto-orient";
          }
        }
      }
    },
    //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let myTopicDicussWrapper = this.$refs.myTopicDicussWrapper;
          this.setScroll(myTopicDicussWrapper, this);
        });
        resolve("初始化scroll结束...");
      });
      return p;
    },
    setScroll(myTopicDicussWrapper, _this) {
      _this.myscroll = new iScroll(myTopicDicussWrapper, {
        //上拉时触发
        onScrollMove: function() {
          if (
            this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
            _this.is_r == false
          ) {
            //加载数据
            _this.is_r = true;
            if(_this.page<_this.totalPage){
					  	_this.page++;
              _this.initMyInteraction();  
            }
          }
        },
      });
      Indicator.close();
    },
  },
  mounted() {
    Indicator.open("加载中...");
    this.initMyInteraction().then(data => {
      this.initScroll();
    }).then(data => {
			this.$nextTick(() => {
				if (!!this.myscroll) this.myscroll.refresh();
			});
			let loadmore = document.getElementsByClassName("loadmore-ul");
			if ("myTopicDiscuss2detail" == localStorage.turnCount) {
				if (loadmore.length > 0) {
					setTimeout(() => {
						loadmore[0].style.transform = localStorage.getItem("turnBackmyTopicDiscuss");
					}, 0);
				}
				localStorage.turnCount = "";
			} 
		}) ;;
  }
};
</script>
<style scoped>
.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
  	background: #f5f5f5
}
.loadmore-ul {
  padding-bottom: 1.2rem;
  list-style: none;
}
</style>